<template>
  <div class="home">
    <div class="title">使用koa2+vue+MySQL创建的一个demo</div>
      <ul class="contentBox">
        <template v-for="(item,index) in list" >
          <li :key="index" class="item">{{item.content}}</li>
        </template>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
	  return {
		  list: []
	  }
  },
  components: {

  },
  created () {
  	this.getList()
  },
  methods: {
	 async getList () {
		  const { data: res } = await this.$http.get('/api/test', {
			   params: {
				   id: 14
			   }
		   })
		  this.list = res.data
	  }
  }
}
</script>

<style lang="less" scoped>
	.home{
		width: 600px;
		margin: 100px auto;
		.title{
			text-align: center;
			font-size: 30px;
		}
		ul,li{
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.contentBox{
			border: 1px solid #555555;
			margin-top: 20px;
			.item{
				margin: 10px 20px;
				background: pink;
				&:hover{
					background-color: lightgreen;
				}
			}
		}
	}
</style>
